<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style type="text/css">
			ul {
				padding: 0;
				border: 1px solid green;
				height: 500px;
				float: left;
				width: 250px;
				list-style: none;
				text-align: left;
			}
			
			#list2 {
				margin-left: 30px;
			}
			
			#list1 {
				position: relative;
			}
			
			.item {
				margin: 10px;
				text-align: center;
			}
			
			.add {
				position: absolute;
				bottom: 0;
			}
			
			.margin-left-30 {
				margin-left: 30px;
			}
		</style>
	</head>

	<body>
		<div class="list-box">
			<ul id="list1">
				 
				<li class="add">
					<input value="aasdfasdfasf" id="inp"/>
					<button onclick="add();">添加选项</button></li>
			</ul>
			<ul id="list2">
				
			</ul>
		</div>
	</body>

</html>

<script type="text/javascript">
	
	function add() {
		// 获取输入内容
		var text = document.getElementById('inp').value;
		// 创建li
		var li = document.createElement('li');
		// 给li填充内容
		li.innerHTML = `<span>${text}</span>
					<button onclick="move();" class="margin-left-30">-></button>`;
		//给li添加class
		li.className = 'item';
		document.getElementById('list1').appendChild(li);
	}
	
	function move() {
		// 1. 获取点击的元素
		var button = event.target;
		var btnText = button.innerText;
		// 2. 通过button找到它父节点(父元素)li
		var li = button.parentNode;
		// 从左边到右边
		if (btnText === '->') {
			console.log('左到右');
			// 3. 改变button的内容
			button.innerText = '<-';
			// 4. 把span和button交换位置
			// 5. 获取span元素
			var span = button.previousElementSibling;
			// 6. 去掉button上的class
			button.className = '';
			// 7. 给span添加class
			span.className = 'margin-left-30';
			li.insertBefore(button, span);
			// 5. 把li移动到右边,就是list2里面
			document.getElementById('list2').appendChild(li);
		} else {
			// 从右边到左边	
			console.log('右到左');
			// 3. 改变button的内容
			button.innerText = '->';
			// 5. 获取span元素
			var span = button.nextElementSibling;
			// 6. button上的添加class
			button.className = 'margin-left-30';
			// 7. 给span去掉class
			span.className = '';
			li.insertBefore(span,button);
			document.getElementById('list1').appendChild(li);
		}
		
		
		
	}
</script>

